<!DOCTYPE html>
<html lang="zxx">

<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>商品详情————新鲜 营养 健康</title>

    <!-- Fav Icons -->
    <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">

</head>

<body>
	<div id="detail">
    <div class="page-wrapper">

        <!-- Preloader -->
        <div class="preloader"></div>



        <!--====================================================================
                                Start Header area
        =====================================================================-->
        <header class="main-header">
            <div class="container">
                <div class="header-inner">
                    <div class="logo">
                        <a href="index.html"><img src="assets/img/logo.png" alt="Main Logo"></a>
                    </div>

                    <div class="categories">
                        <button><i class="flaticon-list"></i>
                            <span>商品分类</span></button>
                        <ul>
                            <li v-for="(classify,i) in classifyList"><a :href="'shop.html?id='+classify.id" ><i class="flaticon-chicken-hand-drawn-outline"></i> {{classify.classifyName}}</a></li>
                            <!-- <li><a href="shop.html"><i class="flaticon-chicken-hand-drawn-outline"></i> 家禽</a></li>
                            <li><a href="shop.html"><i class="flaticon-pressure-washer"></i> 粗粮</a></li>
                            <li><a href="shop.html"><i class="flaticon-pest"></i> Pest Control</a></li>
                            <li><a href="shop.html"><i class="flaticon-stationery"></i> Office Products</a></li>
                            <li><a href="shop.html"><i class="flaticon-make-up"></i> Beauty Products</a></li>
                            <li><a href="shop.html"><i class="flaticon-first-aid-kit"></i> Health Products</a></li>
                            <li><a href="shop.html"><i class="flaticon-track"></i>水产</a></li>
                            <li><a href="shop.html"><i class="flaticon-sketch"></i> 手工艺品</a></li>
                             <li><a href="shop.html"><i class="flaticon-baby-boy"></i> Baby Care</a></li> -->
                        </ul>
                    </div>

                    <form action="shop.html" class="menu-search">
                        <!-- <select name="select-category">
                            <option value="option-1">All Categories</option>
                            <option value="option-2">Fruits and Vegetables</option>
                            <option value="option-3">Meat and Fish</option>
                            <option value="option-4">Home and Cleaning</option>
                            <option value="option-5">Pest Control</option>
                            <option value="option-6">Office Products</option>
                            <option value="option-7">Beauty Products</option>
                            <option value="option-8">Health Products</option>
                            <option value="option-9">Pet Care</option>
                            <option value="option-10">Home Appliances</option>
                            <option value="option-11">Baby Care</option>
                        </select> -->
                        <input type="search" name="name"  required>
                        <button type="submit" style="width: 150px;">搜索</button>
                    </form>

                    <div class="menu-collections">
                        <!-- <div class="collection-item watch">
                            <i class="flaticon-heart"></i>
                            <div class="collection-inner">
                                <div class="alert single-collection">
                                    <button data-dismiss="alert"><i class="flaticon-delete-button"></i></button>
                                    <div class="collection-image">
                                        <img src="assets/img/shop/cart-1.png" alt="">
                                    </div>
                                    <div class="collection-content">
                                        <p>Danish Full Cream Milk</p>
                                        <h6>$120.00</h6>
                                    </div>
                                </div>
                                <div class="alert single-collection">
                                    <button data-dismiss="alert"><i class="flaticon-delete-button"></i></button>
                                    <div class="collection-image">
                                        <img src="assets/img/shop/cart-2.png" alt="">
                                    </div>
                                    <div class="collection-content">
                                        <p>Healthy Yellow Papaya</p>
                                        <h6>$120.00</h6>
                                    </div>
                                </div>
                                <div class="collection-btn">
                                    <a href="cart.html" class="theme-btn bg-blue no-shadow mx-auto">Add to Cart</a>
                                </div>
                            </div>
                        </div> -->
                        <!-- <div class="collection-item cart">
                            <i class="flaticon-shopping-cart"></i>
                            <div class="collection-inner">
                                <div class="alert single-collection">
                                    <button data-dismiss="alert"><i class="flaticon-delete-button"></i></button>
                                    <div class="collection-image">
                                        <img src="assets/img/shop/cart-1.png" alt="">
                                    </div>
                                    <div class="collection-content">
                                        <p>Danish Full Cream Milk</p>
                                        <h6>$120.00</h6>
                                    </div>
                                </div>
                                <div class="alert single-collection">
                                    <button data-dismiss="alert"><i class="flaticon-delete-button"></i></button>
                                    <div class="collection-image">
                                        <img src="assets/img/shop/cart-2.png" alt="">
                                    </div>
                                    <div class="collection-content">
                                        <p>Healthy Yellow Papaya</p>
                                        <h6>$120.00</h6>
                                    </div>
                                </div>
                                <div class="collection-btn">
                                    <a href="cart.html" class="theme-btn bg-blue no-shadow mr-10">View Cart</a>
                                    <a href="checkout.html" class="theme-btn ml-auto no-shadow">Checkout</a>
                                </div>
                            </div>
                        </div> -->
                        <div class="collection-item profile">
                            <i class="flaticon-user-1"></i>
                            <div class="collection-inner">
                                <ul>
                                    <li><a href="cart.html">购物车</a></li>
                                    <li><a href="user.html">用户中心</a></li>
                                    <li id="login" v-if="islogin"><a href="sign-in.html">登录</a></li>
                                    <!-- <li><a href="sign-up.html">Sign Up</a></li> -->
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- <div class="main-menu">
                        <button><i class="flaticon-list-menu"></i></button>
                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li class="dropdown"><a href="#">Blog</a>
                                <ul>
                                    <li><a href="blog.html">All Blog</a></li>
                                    <li><a href="blog-details.html">Blog Details</a></li>
                                </ul>
                            </li>
                            <li class="dropdown"><a href="#">Shop</a>
                                <ul>
                                    <li><a href="shop.html">Shop Page</a></li>
                                    <li><a href="shop-details.html">Shop Details</a></li>
                                    <li><a href="cart.html">Cart Page</a></li>
                                    <li><a href="checkout.html">Checkout</a></li>
                                </ul>
                            </li>
                            <li class="dropdown"><a href="#">Pages</a>
                                <ul>
                                    <li><a href="sign-in.html">Sign In</a></li>
                                    <li><a href="sign-up.html">Sign Up</a></li>
                                </ul>
                            </li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                        <div class="menu-overlay"></div>
                    </div> -->
                </div>
            </div>
            <div class="collection-close"></div>
        </header>
        <!--====================================================================
                                End Header area
        =====================================================================-->



        <!--====================================================================
            Start Banner Section
        =====================================================================-->
        <!-- <section class="banner-section" style="background-image:url(assets/img/banner.jpg);">
            <div class="container">
                <div class="banner-inner text-center">
                    <h2 class="page-title">Product Details</h2>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Shop Details</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </section> -->
        <!--====================================================================
            End Banner Section
        =====================================================================-->


        <!--====================================================================
           Start Shop Details Page
       =====================================================================-->
        <section class="shop-details-page mt-120 rmt-70 mb-60 rmb-20">
            <div class="container">
                <div class="row col-gap-60">

                    <div class="col-xl-3 col-lg-4">
                        <div class="shop-sidebar">
                            <div class="shop-widget b1">
                                <div class="shop-widget-title">
                                    <h5><i class="flaticon-list"></i>分类</h5>
                                </div>
                                <ul>
                                    <li v-for="classify in classifyList"><a :href="'shop.html?id='+classify.id"> {{classify.classifyName}}</a></li>
                                    <!-- <li><a href="shop.html"><i class="flaticon-chicken-hand-drawn-outline"></i> Meat and Fish</a></li>
                                    <li><a href="shop.html"><i class="flaticon-pressure-washer"></i> Home and Cleaning</a></li>
                                    <li><a href="shop.html"><i class="flaticon-pest"></i> Pest Control</a></li>
                                    <li><a href="shop.html"><i class="flaticon-stationery"></i> Office Products</a></li>
                                    <li><a href="shop.html"><i class="flaticon-make-up"></i> Beauty Products</a></li>
                                    <li><a href="shop.html"><i class="flaticon-first-aid-kit"></i> Health Products</a></li>
                                    <li><a href="shop.html"><i class="flaticon-track"></i> Pet Care</a></li>
                                    <li><a href="shop.html"><i class="flaticon-sketch"></i> Home Appliances</a></li>
                                    <li><a href="shop.html"><i class="flaticon-baby-boy"></i> Baby Care</a></li> -->
                                </ul>
                            </div>
                            <div class="shop-widget b1">
                                <div class="shop-widget-title">
                                    <h5>今日推荐</h5>
                                </div>
                                <div class="product list-product d-flex align-items-center bg-white br-5 mb-30" v-for="(sale,i) in sales">
                                    <div class="product-img-wrap">
                                        <img src="assets/img/shop/cart-2.png" alt="img">
                                    </div>
                                    <div class="product-content-wrap">
                                        <div class="product-content">
                                            <p><a :href="'shop-details.html?id='+sale.id">{{sale.productName}}</a>
                                            </p>
                                        </div>
                                        <div class="product-action">
                                            <a :href="'shop-details.html?id='+sale.id" class="add-to-btn small-btn">
                                                <i class="flaticon-shopping-cart"></i>
                                                <span>立即购买</span>
                                                <h5 class="product-price">{{sale.singlePrice}}</h5>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <!-- <div class="product list-product d-flex align-items-center bg-white br-5 mb-30">
                                    <div class="product-img-wrap">
                                        <img src="assets/img/shop/cart-2.png" alt="img">
                                    </div>
                                    <div class="product-content-wrap">
                                        <div class="product-content">
                                            <p><a href="shop-details.html">Organic Yellow Papaya (1ps)</a></p>
                                        </div>
                                        <div class="product-action">
                                            <a href="#" class="add-to-btn small-btn">
                                                <i class="flaticon-shopping-cart"></i>
                                                <span>Add to Cart</span>
                                                <h5 class="product-price">$120.00</h5>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="product list-product d-flex align-items-center bg-white br-5 mb-30">
                                    <div class="product-img-wrap">
                                        <img src="assets/img/shop/cart-3.png" alt="img">
                                    </div>
                                    <div class="product-content-wrap">
                                        <div class="product-content">
                                            <p><a href="shop-details.html">Granny Smith Apple (4ps)</a></p>
                                        </div>
                                        <div class="product-action">
                                            <a href="#" class="add-to-btn small-btn">
                                                <i class="flaticon-shopping-cart"></i>
                                                <span>Add to Cart</span>
                                                <h5 class="product-price">$120.00</h5>
                                            </a>
                                        </div>
                                    </div>
                                </div> -->
                            </div>

                            <!-- <div class="shop-widget widget-product b1">
                                <div class="special-offer-product bg-white p-25 br-5">
                                    <div class="off">10%<span>off</span></div>
                                    <div class="product-img-wrap">
                                        <img src="assets/img/product/product3.png" alt="img">
                                    </div>
                                    <div class="product-content">
                                        <div class="offer-product-price">
                                            <span class="discounted-price">$120.00</span>
                                            <span class="actual-price has-discount">$120.00</span>
                                        </div>
                                        <p><a href="shop-details.html">Organic Granny Smith <br>Apple (4ps)</a></p>
                                    </div>
                                    <div class="product-action">
                                        <a href="#" class="add-to-btn">Add to Cart</a>
                                        <div class="add-wishlist text-center">
                                            <i class="fa fa-heart-o"></i>
                                        </div>
                                    </div>
                                </div>
                            </div> -->
                        </div>
                    </div>


                    <div class="col-xl-9 col-lg-8">
                        <div class="product-details-wrap">

                            <div class="row col-gap-60">
                                <div class="col-xl-5">
                                    <div class="product-preview-wrap">
                                        <div class="tab-content bg-white p-50 b1 br-5">
                                            <div class="tab-pane" id="preview1">
                                                <img src="assets/img/product/product23.png" alt="Product Preview Image" data-magnify-src="assets/img/product/product23.png" />
                                            </div>
                                            <div class="tab-pane active" id="preview2">
                                                <img src="assets/img/product/product23.png" alt="Product Preview Image" data-magnify-src="assets/img/product/product23.png" />
                                            </div>
                                            <div class="tab-pane" id="preview3">
                                                <img src="assets/img/product/product23.png" alt="Product Preview Image" data-magnify-src="assets/img/product/product23.png" />
                                            </div>
                                            <div class="tab-pane" id="preview4">
                                                <img src="assets/img/product/product23.png" alt="Product Preview Image" data-magnify-src="assets/img/product/product23.png" />
                                            </div>
                                        </div>

                                        <ul class="nav nav-tabs mt-30">
                                            <li>
                                                <a data-toggle="tab" href="#preview1">
                                                    <img src="assets/img/product/product23.png" alt="Product Thumbnail Image" />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="active" data-toggle="tab" href="#preview2">
                                                    <img src="assets/img/product/product23.png" alt="Product Thumbnail Image" />
                                                </a>
                                            </li>
                                            <li>
                                                <a data-toggle="tab" href="#preview3">
                                                    <img src="assets/img/product/product23.png" alt="Product Thumbnail Image" />
                                                </a>
                                            </li>
                                            <li>
                                                <a data-toggle="tab" href="#preview4">
                                                    <img src="assets/img/product/product23.png" alt="Product Thumbnail Image" />
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-xl-7">
                                    <div class="product-details text-left bg-white px-50 py-45 b1 br-5">
                                        <h3 class="mb-25 rmt-25">{{product.productName}}</h3>
                                        <div class="rating mb-25">
                                            <div class="star mr-15">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                            </div>
                                            <div class="text">销量：{{product.sales}}</div>
                                        </div>
                                        <p>{{product.productWeight}}</p>
                                        <p>{{product.remark}}</p>

                                        <!-- <h6 class="stock">Availability: <span>In Stock</span></h6> -->
                                        <h4 class="price">￥{{product.singlePrice}}</h4>

                                        <div class="product-spinner mt-20">
                                            <div class="number-input b1">
                                              <button class="minus"></button>
                                              <input min="1" name="quantity"  id="productCount" value="1" type="number">
                                              <button class="plus"></button>
                                            </div>
                                            <a href="javascript:;" onclick="buy()" id="buy" class="theme-btn br-30 ml-25">立即购买</a>
                                            <div class="add-wishlist">
                                                <i class="fa fa-heart-o"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- product-details-tab/review -->
                            <div class="product-details-review bg-white mt-60 px-50 pt-20 pb-30 b1 br-5">
                                <ul class="nav nav-tabs mb-20 mt-10">
                                    <li><a href="#details" class="active" data-toggle="tab">说明</a></li>
                                    <li><a href="#addi-info" data-toggle="tab" class="">附加信息</a></li>
                                    <li><a href="#review" data-toggle="tab" class="">评价</a></li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane active" id="details">
                                        <p>{{product.remark}}</p>

                                    </div>
                                    <div class="tab-pane" id="addi-info">
                                        <p>{{product.remark}}</p>
                                    </div>
                                    <div class="tab-pane" id="review">

                                        <!-- product-review-comments -->
                                        <div class="product-review-comments">

                                            <!-- dubble-comments -->
                                            <div class="latest-comments">
                                                <div class="comments-box">
                                                    <div class="comments-avatar">
                                                        <img src="assets/img/shop/reviewer-1.png" alt="">
                                                    </div>
                                                    <div class="comments-text">
                                                        <div class="avatar-name">
                                                            <h5>用户1</h5>
                                                            <span>3天前</span>
                                                            <div class="ratings">
                                                                <i class="flaticon-star"></i>
                                                                <i class="flaticon-star"></i>
                                                                <i class="flaticon-star"></i>
                                                                <i class="flaticon-star"></i>
                                                                <i class="flaticon-star"></i>
                                                            </div>
                                                        </div>
                                                        <p>好评</p>
                                                    </div>
                                                </div>

                                                <div class="child comments-box">
                                                    <div class="comments-avatar">
                                                        <img src="assets/img/shop/reviewer-1.png" alt="">
                                                    </div>
                                                    <div class="comments-text">
                                                        <div class="avatar-name">
                                                            <h5>用户1</h5>
                                                            <span>2天前</span>
                                                        </div>
                                                        <p>追加好评</p>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- singlepost-comments -->
                                            <div class="latest-comments">
                                                <div class="comments-box">
                                                    <div class="comments-avatar">
                                                        <img src="assets/img/shop/reviewer-1.png" alt="">
                                                    </div>
                                                    <div class="comments-text">
                                                        <div class="avatar-name">
                                                            <h5>用户2</h5>
                                                            <span>4天前</span>
                                                            <div class="ratings">
                                                                <i class="flaticon-star"></i>
                                                                <i class="flaticon-star"></i>
                                                                <i class="flaticon-star"></i>
                                                                <i class="flaticon-star"></i>
                                                                <i class="flaticon-star"></i>
                                                            </div>
                                                        </div>
                                                        <p>好评</p>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- singlepost-comments -->
                                            <div class="latest-comments">
                                                <div class="comments-box">
                                                    <div class="comments-avatar">
                                                        <img src="assets/img/shop/reviewer-1.png" alt="">
                                                    </div>
                                                    <div class="comments-text">
                                                        <div class="avatar-name">
                                                            <h5>用户3</h5>
                                                            <span>5天前</span>
                                                            <div class="ratings">
                                                                <i class="flaticon-star"></i>
                                                                <i class="flaticon-star"></i>
                                                                <i class="flaticon-star"></i>
                                                                <i class="flaticon-star"></i>
                                                                <i class="flaticon-star"></i>
                                                            </div>
                                                        </div>
                                                        <p>好评</p>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                </div>
                            </div>

                            <!-- Related Product -->
                            <div class="related-product mt-110 rmt-75">
                                <h3 class="mb-35">更多推荐</h3>
                                <div class="row">

                                    <!--single Product -->
                                    <div class="col-xl-4 col-md-6 col-md-4 mb-30" v-for="newProduct in newProducts">
                                        <div class="product">
                                            <div class="product-img-wrap">
                                                <img src="assets/img/product/product26.png" alt="img">
                                                <!-- Button trigger modal -->
                                                <!-- <button class="quick-view" type="button" data-toggle="modal" data-target="#quick-view">Quick View</button> -->
                                            </div>
                                            <div class="product-content-wrap">
                                                <div class="product-content">
                                                    <p><a :href="'shop-details.html?id='+newProduct.id">{{newProduct.productNmae}}</a></p>
                                                </div>
                                                <div class="product-action">
                                                    <a :href="'shop-details.html?id='+newProduct.id" class="add-to-btn small-btn">
                                                        <i class="flaticon-shopping-cart"></i>
                                                        <span>立即购买</span>
                                                        <h5 class="product-price">￥{{newProduct.singlePrice}}</h5>
                                                    </a>
                                                    <div class="add-wishlist">
                                                        <i class="fa fa-heart-o"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!--single Product -->
                                    <!-- <div class="col-xl-4 col-md-6 col-md-4 mb-30">
                                        <div class="product">
                                            <div class="product-img-wrap">
                                                <img src="assets/img/product/product27.png" alt="img">
                                                <button class="quick-view" type="button" data-toggle="modal" data-target="#quick-view">Quick View</button>
                                            </div>
                                            <div class="product-content-wrap">
                                                <div class="product-content">
                                                    <p><a href="shop-details.html">Chashi Aromatic Chinigura Rice (1 Bag 5 kg)</a></p>
                                                </div>
                                                <div class="product-action">
                                                    <a href="#" class="add-to-btn small-btn">
                                                        <i class="flaticon-shopping-cart"></i>
                                                        <span>Add to Cart</span>
                                                        <h5 class="product-price">$120.00</h5>
                                                    </a>
                                                    <div class="add-wishlist">
                                                        <i class="fa fa-heart-o"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div> -->

                                    <!--single Product -->
                                    <!-- <div class="col-xl-4 col-md-6 col-md-4 mb-30">
                                        <div class="product">
                                            <div class="product-img-wrap">
                                                <img src="assets/img/product/product28.png" alt="img">
                                                <button class="quick-view" type="button" data-toggle="modal" data-target="#quick-view">Quick View</button>
                                            </div>
                                            <div class="product-content-wrap">
                                                <div class="product-content">
                                                    <p><a href="shop-details.html">Chashi Aromatic Chinigura Rice (1 Bag 5 kg)</a></p>
                                                </div>
                                                <div class="product-action">
                                                    <a href="#" class="add-to-btn small-btn">
                                                        <i class="flaticon-shopping-cart"></i>
                                                        <span>Add to Cart</span>
                                                        <h5 class="product-price">$120.00</h5>
                                                    </a>
                                                    <div class="add-wishlist">
                                                        <i class="fa fa-heart-o"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div> -->

                                    <!--single Product -->
                                    <!-- <div class="col-xl-4 col-md-6 col-md-4 mb-30">
                                        <div class="product">
                                            <div class="product-img-wrap">
                                                <img src="assets/img/product/product29.png" alt="img">
                                                <button class="quick-view" type="button" data-toggle="modal" data-target="#quick-view">Quick View</button>
                                            </div>
                                            <div class="product-content-wrap">
                                                <div class="product-content">
                                                    <p><a href="shop-details.html">Chashi Aromatic Chinigura Rice (1 Bag 5 kg)</a></p>
                                                </div>
                                                <div class="product-action">
                                                    <a href="#" class="add-to-btn small-btn">
                                                        <i class="flaticon-shopping-cart"></i>
                                                        <span>Add to Cart</span>
                                                        <h5 class="product-price">$120.00</h5>
                                                    </a>
                                                    <div class="add-wishlist">
                                                        <i class="fa fa-heart-o"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div> -->


                                    <!--==================================== Start product-quick-view //product-modal  ================-->
                                    <!-- <div class="modal product-modal fade" id="quick-view" tabindex="-1" role="dialog" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body p-35 pt-0">


                                                    <div class="product-quick-view">
                                                        <div class="container">
                                                            <div class="row">
                                                                <div class="col-lg-6">
                                                                    <div class="product-preview-wrap">
                                                                        <div class="tab-content bg-white p-50 b1 br-5">
                                                                            <div class="tab-pane" id="preview_1">
                                                                                <img src="assets/img/product/product23.png" alt="Product Preview Image" data-magnify-src="assets/img/product/product23.png" />
                                                                            </div>
                                                                            <div class="tab-pane active" id="preview_2">
                                                                                <img src="assets/img/product/product23.png" alt="Product Preview Image" data-magnify-src="assets/img/product/product23.png" />
                                                                            </div>
                                                                            <div class="tab-pane" id="preview_3">
                                                                                <img src="assets/img/product/product23.png" alt="Product Preview Image" data-magnify-src="assets/img/product/product23.png" />
                                                                            </div>
                                                                            <div class="tab-pane" id="preview_4">
                                                                                <img src="assets/img/product/product23.png" alt="Product Preview Image" data-magnify-src="assets/img/product/product23.png" />
                                                                            </div>
                                                                        </div>

                                                                        <ul class="nav nav-tabs flex-nowrap align-content-between mt-30">
                                                                            <li>
                                                                                <a data-toggle="tab" href="#preview_1">
                                                                                    <img src="assets/img/product/product23.png" alt="Product Thumbnail Image" />
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a class="active" data-toggle="tab" href="#preview_2">
                                                                                    <img src="assets/img/product/product23.png" alt="Product Thumbnail Image" />
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a data-toggle="tab" href="#preview_3">
                                                                                    <img src="assets/img/product/product23.png" alt="Product Thumbnail Image" />
                                                                                </a>
                                                                            </li>
                                                                            <li>
                                                                                <a data-toggle="tab" href="#preview_4">
                                                                                    <img src="assets/img/product/product23.png" alt="Product Thumbnail Image" />
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-6">
                                                                    <div class="product-details text-left bg-white ml-25 px-50 py-45 b1 br-5">
                                                                        <h3 class="mb-25 rmt-25">Fresh Onion 1kg</h3>
                                                                        <div class="rating mb-25">
                                                                            <div class="star mr-15">
                                                                                <i class="fa fa-star"></i>
                                                                                <i class="fa fa-star"></i>
                                                                                <i class="fa fa-star"></i>
                                                                                <i class="fa fa-star"></i>
                                                                                <i class="fa fa-star"></i>
                                                                            </div>
                                                                            <div class="text">(13 Review)</div>
                                                                        </div>
                                                                        <p>Sed egestas, ante et vulputate volutpat, eropede semper est, vitluctus metus libero eu augue. Morbi purus libero, faucibus adipiscing.</p>
                                                                        <p>commodo quis, gravida id, est. Sed lectus. Praest elemhendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat.lacus a ultrices.</p>

                                                                        <h6>Availability: <span>In Stock</span></h6>
                                                                        <h4 class="price">$120.00</h4>

                                                                        <div class="product-spinner mt-20">
                                                                            <div class="number-input b1">
                                                                              <button class="minus"></button>
                                                                              <input min="1" name="quantity" value="2" type="number">
                                                                              <button class="plus"></button>
                                                                            </div>
                                                                            <a href="#" class="theme-btn br-30 ml-20">Add to Cart</a>
                                                                            <div class="add-wishlist">
                                                                                <i class="fa fa-heart-o"></i>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div> -->
                                    <!--==================================== end product-quick-view //product-modal  ================-->


                                </div>
                            </div>

                        </div>

                    </div>
                </div>


            </div>
        </section>
        <!--====================================================================
           End Shop Details Page
       =====================================================================-->



        <!--====================================================================
                            Start footer section
        =====================================================================-->
        <footer class="footer bg-black pt-100 text-lg-left text-center">
            <div class="container">
                <div class="row">
        
                    <!--Footer Column-->
                    <div class="col-lg-3 col-md-12 mb-30">
                        <div class="footer-widget logo-widget mr-20">
                            <div class="footer-logo">
                                <a href="index.html"><img src="assets/img/logo.png" alt="footer logo"></a>
                            </div>
                            <p>坚持农业农村优先发展，要推动城乡融合发展。破解城乡发展不平衡不协调的矛盾，必须打破城乡二元的制度藩篱，重塑城乡关系，让广大农民平等参与现代化进程。</p>
                           <!-- <div class="footer-social-icon">
                                <ul class="social-style-one">
                                    <li><a href="#"><i class="fa fa-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                    <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                                </ul>
                            </div> -->
                        </div>
                    </div>
        
                    <!--Footer Column-->
                    <div class="col-lg-2 col-md-3 mb-30">
                        <div class="footer-widget links-widget float-lg-right mr-40">
                            <h5 class="footer-title mb-30">快捷导航</h5>
                            <ul class="list">
                                <li><a href="index.html">主页</a></li>
                                <li><a href="shop.html">商品</a></li>
                                <li><a href="sign-in.html">登录</a></li>
                                <!-- <li><a href="#">CONTACT</a></li> -->
                            </ul>
                        </div>
                    </div>
        
                    <!--Footer Column-->
                    <div class="col-lg-4 col-md-5 mb-30">
                        <div class="footer-widget form-widget ml-115 mr-30">
                            <h5 class="footer-title mb-30">坚持农业农村优先发展</h5>
                            <p>中央农村工作会议日前在北京举行。会议研究部署了坚持农业农村优先发展的政策措施，是事关脱贫攻坚和乡村振兴的又一次重要会议。明后两年是全面建成小康社会的关键时期，是打赢脱贫攻坚战和实施乡村振兴战略的历史交汇期，做好“三农”工作具有重大意义。会议为做好明后两年“三农”工作确定了基调，为加快实施乡村振兴战略指明了方向，是推进“三农”事业的响鼓重槌。</p>
                            <!-- <form class="subscribe">
                                <input type="email" placeholder="Your Email For Notify" required>
                                <button type="submit">Send</button>
                            </form> -->
                        </div>
                    </div>
        
                    <!--Footer Column-->
                    <div class="col-lg-3 col-md-4 mb-30">
                        <div class="footer-widget pament-widget">
                            <h5 class="footer-title mb-30">Payment</h5>
                            <ul class="list">
                                <li><a href="#"><img src="assets/img/pay-method/visa.png" alt=""></a></li>
                                <li><a href="#"><img src="assets/img/pay-method/mastercard.png" alt=""></a></li>
                                <li><a href="#"><img src="assets/img/pay-method/discover.png" alt=""></a></li>
                                <li><a href="#"><img src="assets/img/pay-method/americanexpress.png" alt=""></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
        
                        <!-- Copyright Area-->
                        <div class="copyright text-center pl-10 pr-10 pt-30 pb-10 mt-55 rmt-35 mb-65">
                            <p>Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                        </div>
        
                    </div>
                </div>
        
            </div>
        </footer>
        <!--====================================================================
                                End footer section
        =====================================================================-->



    </div>
	</div>
    <!--End pagewrapper-->


    <!-- Scroll Top Button -->
    <button class="scroll-top scroll-to-target" data-target="html"><span class="fa fa-angle-up"></span></button>


    <!-- jequery plugins -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap-v4.1.3.min.js"></script>
    <script src="assets/js/jquery.nice-select.min.js"></script>
    <script src="assets/js/jquery.simpleLoadMore.min.js"></script>
    <script src="assets/js/slick.min.js"></script>
    <script src="assets/js/appear.js"></script>

    <!-- Custom script -->
    <script src="assets/js/script.js"></script>
	<script src="assets/js/vue-router.js"></script>
	<script src="assets/js/vue.js"></script>
	<script src="assets/js/axios.min.js"></script>
	<script src="js/jquery-1.9.1.min.js"></script>
</body>

</html>
<script type="text/javascript">

</script>
<script>
	var user;
	var v= window.location.href.split("?")[1]
	var paramid;
	if(v!=null&&v.indexOf('id')>=0){
		paramid= window.location.href.split("?")[1].split("=")[1];
	}
	console.log(paramid);


	function buy(){
		var count=$('#productCount').val();
		console.log("********"+count);
		console.log("-------goorder")
		var login=$('#login')
		console.log(login.is(':hidden'))
		if(!login.is(':hidden')){
			 window.location='Orders.html?id='+paramid+'&count='+count
		}else{
			window.location='sign-in.html'
		}
	}
	    var t;
	new Vue({
		el:'#detail',
		data:{
			id:'',
			classifyList:[],
			product:{},
			sales:[],
			newProducts:[],
			salePageSize:3,
			newPageSize:8,
			islogin:true
		},
		methods:{
			classfiyLoad:function(){
                $.get('http://192.168.1.19:8080/products/getClassify',function (resp) {
                    console.log("*****类别*****");
                    t.classifyList=resp.data.list;
                    console.log(t.classifyList);
                })
			},
			isLogin:function(){
               if(user!=null){
				   this.islogin= false;
			   }else{
				   this.islogin=true;
			   }
			},
			getBetterSales:function(salePageSize){
                $.get('http://192.168.1.19:8080/products/getBetterSales',{pagesSize:salePageSize},function (resp) {
                    console.log(resp.data);
                    t.sales=resp.data;
                })
			},
			getNewProducts:function(pageSize){
                $.get('http://192.168.1.19:8080/products/getNewProducts',{pageSize:pageSize},function (resp) {
                    console.log("******获取新产品******");
                    t.newProducts=resp.data.list;
                })
			},
			getParam:function(){
				if(paramid!=null){
					this.id=paramid;
				}

			},
			getProductDetail:function(id){
				$.get('http://192.168.1.19:8080/products/getSendProductsDetail',{id:id},function (resp) {
				    console.log("****详情****"+resp.data);
                    t.product=resp.data;
                })
			}
		},
		mounted:function(){
			user=sessionStorage.getItem('user');
		    t=this;
			this.getParam();
			this.getNewProducts(this.newPageSize);
			this.classfiyLoad();
			this.isLogin();
			this.getBetterSales(this.salePageSize);
			this.getProductDetail(this.id);
		}
	})
</script>
